<template>
	<view class="banner">
		<view class="picBox">
			<swiper class="swiper" :interval="interval" :current="current" :duration="duration" :disable-touch="stopTouchMove" @change="changeBanner">
				<!-- VR -->
				<swiper-item @click="showVr" v-if="vrUrl">
					<view class="vrPic">
						<image class="img" mode="aspectFill" :src="$filters.oosImgZip(vrPicUrl)"></image>
					</view>
					<view class="icon">
						<image class="img" :src="$imgUrl + '/icon/vrIcon.png'"></image>
					</view>
				</swiper-item>
				<!-- 视频 -->
				<swiper-item v-if="videoUrl">
					<!-- #ifdef MP-WEIXIN -->
					<video class="video" :src="videoUrl" controls></video>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<video
					v-show="!isShow"
					class="video"
					id="videoBox"
					:src="videoUrl"
					:show-center-play-btn="false"
					:controls="controls"
					autoplay="true"
					ref="VideoContext"
					@play="playVideo()"
					@pause="endVideo()"
					@ended="endVideo()"
					@fullscreenchange="fullscreenchange"></video>
					<view v-show="isShow && videoUrl" class="cover-view">
						<view class="img-box">
							<videoPic :videoUrl="videoUrl"></videoPic>
							<view class="icon">
								<image @click="plays()" mode="aspectFill" class="img" :src="$imgUrl + '/icon/videoIcon.png'"></image>
							</view>
						</view>
					</view>
					<!-- #endif -->
				</swiper-item>
				<!-- 图片 -->
				<swiper-item v-for="(item,i) in bannerList" :key="i">
					<image class="img" mode="aspectFill" :src="$filters.oosImgZip(item)"></image>
				</swiper-item>
			</swiper>
			<view class="numbox" v-if="curTab>=tabList.length-1">{{videoUrl&&vrUrl?current-1:videoUrl||vrUrl?current:current+1}}/{{bannerList.length}}</view>
			<!-- <view class="numbox" v-if="curTab>=tabList.length-1">{{videoUrl?current:current+1}}/{{bannerList.length}}</view> -->
		</view>
		<!-- tab切换 -->
		<view class="tabBox" v-if="tabList.length>1">
			<view class="box">
				<view class="tab" :class="curTab==i?'active':''" v-for="(item,i) in tabList" @click="tabClick(i)">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick, watch } from 'vue'
import { onNavigationBarButtonTap } from "@dcloudio/uni-app"
import config from '@/utils/config'
import videoPic from '@/components/vrBanner/videoPic.vue'

const current = ref(0)
const interval = ref(2000)
const duration = ref(500)
const statusBarHeight = ref()

const props = defineProps({
	bannerList: {
		type: Array,
		default: []
	},
	roomName: {
		type: String,
		default: ''
	},
	vrPicUrl: {
		type: String,
		default: ''
	},
	vrUrl: {
		type: String,
		default: ''
	},
	videoUrl: {
		type: String,
		default: ''
	}
})

onMounted(() => {
	let res = uni.getSystemInfoSync()
	statusBarHeight.value = res.statusBarHeight + 6 + 'px'
})

watch(
	()=>props.vrUrl,(newVal)=>{
		if(newVal){
			tabList.value.unshift({ name:'VR' })
		}
	}
)

watch(
	()=>props.videoUrl,(newVal)=>{
		if(newVal){
			tabList.value.unshift({ name:'视频' })
		}
	}
)

const changeBanner = async(e)=>{
	current.value = e.detail.current
	if(tabList.value.length>2){
		if(e.detail.current==0){
			curTab.value = 0
		}else if(e.detail.current==1){
			curTab.value = 1
		}else{
			curTab.value = 2
		}
	}else if(tabList.value.length == 2){
		if(e.detail.current==0){
			curTab.value = 0
		}else{
			curTab.value = 1
		}
	}
}

const curTab = ref(0)
const tabList = ref([
	// { name:'VR' },
	// { name:'视频' },
	{ name:'图片' }
])
const tabClick = (i)=>{
	curTab.value = i
	if(i==0){
		current.value = 0
	}else if(i==1){
		current.value = 1
	}else{
		current.value = 2
	}
}

const showVr = ()=>{
	uni.navigateTo({
		url: `/pages/searchRoom/vrPage?vrUrl=${props.vrUrl}`
	})
}

// 视频滑动处理
const controls = ref(false)
const isShow = ref(true)
const stopTouchMove = ref(false)
const VideoContext = ref(null)
const plays = ()=> {
	controls.value = true
	isShow.value = false
	stopTouchMove.value = true
	let videoContext = uni.createVideoContext('videoBox', this)
	videoContext.requestFullScreen()
}
//video播放时，隐藏覆盖层，不能滑动，不能轮播
const playVideo = ()=> {
	isShow.value = false
	stopTouchMove.value = true
}
const endVideo = ()=> {
	controls.value = false
	isShow.value = true
	stopTouchMove.value = false
}
const fullscreenchange = (e)=> {
	if (!e.detail.fullScreen) {
		uni.createVideoContext('videoBox', this).pause()
		endVideo()
	}
}


onNavigationBarButtonTap(()=>{
	let pages = getCurrentPages();
	let curPage = pages[pages.length - 1].$page.fullPath;
	uni.share({
		provider: "weixin",
		scene: "WXSceneSession",
		type: 5,
		miniProgram: {
		    id:  config.wxChatAppId,
		    path: decodeURIComponent(curPage),
			type: 0,
			webUrl: 'http://uniapp.dcloud.io'
		},
		title: "南舒房",// 分享标题
		summary: props.roomName,// 分享内容文字
		imageUrl: `${props.bannerList[0]}@oosImage|384h_480w_0e`,//分享封面图片
		success: function(res) {
			console.log(res)
		},
		fail: function(err) {
			console.log(err)
		}
	});
})
</script>

<style lang="scss" scoped>
.banner{
	position: relative;
	height: 516rpx;
	.picBox{
		.swiper{
			height: 516rpx;
			.vrPic{
				width: 100%;
				height: 516rpx;
			}
			.icon{
				width: 104rpx;
				height: 104rpx;
				position: absolute;
				top: 50%;
				left: 0;
				right: 0;
				margin: -52rpx auto 0;
			}
			.video{
				width: 100%;
				height: 516rpx;
			}
			.img-box{
				width: 100%;
				height: 516rpx;
			}
		}
		.numbox{
			position: absolute;
			right: 32rpx;
			bottom: 44rpx;
			background: rgba(0,0,0,0.3);
			border-radius: 200rpx;
			color: #fff;
			padding: 0 20rpx;
			line-height: 36rpx;
			font-size: 24rpx;
		}
	}
	.tabBox{
		position: absolute;
		bottom: 40rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
		z-index: 999;
		display: flex;
		justify-content: center;
		.box{
			font-size: 0;
			height: 44rpx;
			background: rgba(255,255,255,0.8);
			border-radius: 200rpx;
		}
		.tab{
			display: inline-block;
			width: 80rpx;
			text-align: center;
			font-size: 24rpx;
			line-height: 44rpx;
			color: #999;
			&.active{
				background: #FD9618;
				color: #fff;
				border-radius: 200rpx;
			}
		}
	}
}
</style>
